﻿@*<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>ASP.NET Web API is a framework that makes it easy to build HTTP services that reach
        a broad range of clients, including browsers and mobile devices. ASP.NET Web API
        is an ideal platform for building RESTful applications on the .NET Framework.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301870">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301871">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301872">Learn more &raquo;</a></p>
    </div>
</div>*@





<div id="body">
    <section class="content-wrapper main-content clear-fix">
        <div>
            <h2>All Products wb</h2>
            <ul id="products" />
        </div>
        <div>
            <h2>Search by ID wb</h2>
            <input type="text" id="prodId" size="5" />
            <input type="button" value="Search" onclick="find();" />
            <p id="product" />
        </div>
    </section>
</div>
@section scripts{
    <script>
        var apiUrl = '/DingApi/api/products';
        $(document).ready(function () {
            // Send an AJAX request
            $.getJSON(apiUrl).done
                (function (data) {
                    // On success, 'data' contains a list of products.
                    $.each(data, function (key, item) {
                        // Add a list item for the product.
                        $('<li>', { text: formatItem(item) }).appendTo($('#products'));
                    });
                });
        });




        function formatItem(item) {
            return item.Name + ': $' + item.Price;
        }




        function find() {
            var id = $('#prodId').val();
            $.getJSON(apiUrl + '/' + id).done(function (data) {
                $('#product').text(formatItem(data));
            }).fail(function (jqXHR, textStatus, err) {
                $('#product').text('Error4: ' + err + "[" + apiUrl + '/' + id + "]");
            });
        }


    </script>
}
